<template>
	<view>
		<view class="backimg">
			<image class="backimg" :src="list.bg_image" mode=""></image>
			<view class="teambox">

				<view class="titbox">
					<view class="tetit">免费报名</view>
					<view class="title">
						<view class="">{{list.name}}</view>
						<view class="fenx">一键分享<up-icon name="share-square" color="#Fff" size="14"></up-icon>
						</view>
					</view>
					<view class="dizcd">
						<view class="">大学路店</view>
						<view class="">场地：室内场地</view>
					</view>
					<view class="jck">{{list.places.address}}</view>
					<view class="dizcd1">
						<view class="">活动时间</view>
						<view class="">{{list.competition_start_time_text}}</view>
					</view>
					<view class="dizcd1">
						<view class="">级别</view>
						<view class="">线上报名{{list.team_num}}支队伍，满额将不在扩充队伍</view>
					</view>
					<view class="dizcd1">
						<view class="">赛制</view>
						<view class="">全场{{list.competition_system}}</view>
					</view>
					<view class="baom">
						<view class="banum">已报名:({{team.length}})</view>
						<up-avatar-group :urls="urls" size="35" gap="0.2" maxCount="10"></up-avatar-group>
					</view>
				</view>
				<view class="" style="height: 100vh; background-color: #f9f9f9;">
					<view class="" style="height: 270rpx;"></view>
					<view class="xqtext" v-html="list.detail"></view>
					<view class="teamlist">
						<view class="teamnum">参赛队伍数量：{{team.length}}</view>
						<view class="teamli" v-for="(item,index) in team" :key="index">
							<image class="teampic" :src="item.captain_user_avatar" mode=""></image>
							<view class="teamnav">
								<view class="teamname">{{item.name}}</view>
								<view class="teamphone">联系方式：{{item.captain_user_mobile}}</view>
							</view>
							<view v-if="item.captain_user_id!=myid && item.is_join == 0" class="addteam" @click="chanaddteam(item)">加入队伍
							</view>
							<view v-else @click="chanaddteam(item)" class="addteam">查看队伍</view>
						</view>
					</view>
					<view class="teambutt" @click="teamadd()" v-if="list.is_join == 0">添加队伍</view>
					<!-- <view v-if="phone.value==myteam.value" class="teambutt1">解散队伍</view> -->
					<view style="height: 40rpx;"></view>
				</view>

			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import request from '../../utils/request';
	import {
		onShow
	} from '@dcloudio/uni-app'
	let token = ref()
	let venueId = ref()
	let list = ref([])
	let myteam = ref('z', '176****5668')
	let myid = ref(0)
	onShow(() => {
		const userinfo = uni.getStorageSync('userinfo')
		myid.value = userinfo.id
		console.log(myid.value);
		token.value = uni.getStorageSync('token')
		const options = getCurrentPages().pop().options;
		venueId.value = decodeURIComponent(options.id);
		console.log(venueId.value);
		request.post('Competitions/read', {
			data: {
				id: venueId.value
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
			list.value = res.data
			console.log(list.value);
			team.value = list.value.teams
			urls.value = team.value.map(item => item.captain_user_avatar)
			console.log(urls.value);
		}).catch(err => {
			console.log(err);
		})
	})
	let urls = ref([])
	let team = ref([])
	const chanaddteam = (item) => {
		const teamid = item.id
		console.log(teamid);
		uni.navigateTo({
			url: `/pages/addteam/addteam?id=${teamid}&venueId=${venueId.value}&is_join=1`
		})
	}
	const teamadd = () => {
		console.log(list.value.id);
		const id = list.value.id
		uni.navigateTo({
			url: `/pages/conteam/conteam?id=${id}`
		})
	}
</script>

<style scoped>
	.backimg {
		width: 100%;
		height: 350rpx;
		display: block;
		/* background: url('/static/logo.png')no-repeat center center/cover; */
	}

	.teambox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 300rpx;
	}

	.tetit {
		width: 250rpx;
		height: 40rpx;
		color: #ebdca3;
		font-size: 24px;
		background-color: #152d27;
		text-align: center;
		border-radius: 0 15px 0 0;
		position: absolute;
		top: -30rpx;
		left: 0;
	}

	.titbox {
		width: 100%;
		height: 412rpx;
		background-color: #152d27;

		color: #fff;
		font-size: 12px;
		padding: 0 20rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fenx {
		display: flex;
		align-items: center;
		width: 176rpx;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #dd4b39;
	}

	.dizcd {
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jck {
		height: 52rpx;
		border-bottom: 1px #ccc dashed;
	}

	.dizcd1 {
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.baom {
		width: 690rpx;
		height: 220rpx;
		border-radius: 10rpx;
		background-color: #fff;
		position: absolute;
		bottom: -180rpx;
		left: 30rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.banum {
		height: 90rpx;
		line-height: 90rpx;
		color: #000;
	}

	.xqtext {
		padding: 0 40rpx;
		font-size: 22px;
		font-weight: 700;
	}

	.xqtite {
		padding: 0 40rpx;
	}

	.teamlist {
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	.teamnum {
		height: 120rpx;
		line-height: 120rpx;
		padding-left: 40rpx;
		font-size: 22px;
	}

	.teamli {
		width: 612rpx;
		height: 190rpx;
		border-bottom: 1px solid #d6d6d6;
		margin: 0 auto;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.teampic {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 50rpx;
	}

	.teamnav {
		margin-right: 70rpx;
	}

	.teamname {
		font-size: 14px;
		margin-bottom: 20rpx;

	}

	.teamphone {
		font-size: 12px;
		color: #dd4b39;
	}

	.addteam {
		font-size: 14px;
		color: #10c696;
	}

	.teambutt {
		margin: 0 auto;
		margin-top: 390rpx;
		margin-bottom: 30rpx;
		height: 90rpx;
		width: 690rpx;
		background-color: #10c696;
		line-height: 90rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
	}

	.teambutt1 {
		margin: 0 auto;

		height: 90rpx;
		width: 690rpx;
		background-color: #ff0000;
		line-height: 90rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
	}
</style>